<template>
	<view class="notice">
		<headerSpaceBetweenVue>
			<template #icon>
				<view class="read-btn" @click="readAll">一键已读</view>
			</template>
			<template #title>系统通知</template>
		</headerSpaceBetweenVue>
		<view class="content">
			<noticeItemVue :item="item" v-for="item in list" :key="item.id"></noticeItemVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import noticeItemVue from '@/components/notice-item/notice-item.vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		apiNoticeList,
		apiReadAllNotice
	} from '@/api/apis';

	let list = ref([])
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)

	const getNoticeList = async (query) => {
		await apiNoticeList(query).then(res => {
			list.value = res.data.data
		})
	}
	const readAll = async () => {
		await apiReadAllNotice().then(res => {
			getNoticeList({
				page: 1
			})
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
		})
	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await apiNoticeList({
			page: page.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})

	})
	getNoticeList()
</script>

<style lang="scss" scoped>
	.content {
		padding-top: calc(var(--status-bar-height) + 100rpx);
	}

	.read-btn {
		color: $theme-color;
		font-size: 28rpx;
	}
</style>